<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        *{  margin: 0px;  padding: 0px;  }
        body{  background: url("img/background.png") 105px 88px  no-repeat;  }
        header{  width:1262px;  height:90px;  background:url("img/menubar.jpg") 105px 0px no-repeat;  }
        .logo{  margin-left: 240px;  margin-top: 20px;  position: absolute;  }



        /* 顶部 */
        .top ul{float:right;list-style: none}
        .top li{height:10px;float:left;padding:10px 50px 0 0;}
        .top a{font-size:10px;color:#324a0f;font-weight: bold;text-decoration:none;}
        /* 顶部 */

        /*nav*/
        .nav{padding: 30px 60px 0}
        .nav ul{float:right;list-style: none;}
        .nav li{line-height:48px;float: left;padding:0 56px 0 4px;position: relative}
        .nav a{font-size: 18px;color: #7cab38;font-weight: bold;text-decoration:none;}

         .nav .submenue{width:410px;background:url("img/triangle.png") no-repeat 34px 0 #fff;padding:4px;border-radius:8px;
             position:absolute;left:0; display: none;}
        .nav li:hover .submenue{display:block;}
        .nav .submenue ul{height:30px;background:#5d74bd;border-radius:6px;}
        .nav .submenue li{float:left;padding:0 8px 0 22px;line-height:30px;}
        .nav .submenue a{font-size:14px;color:#fff;}

        /*login*/
        .broad{background: url("img/bg.png") 105px -10px no-repeat;opacity: 0.6;}
        .content{  width: 960px;  margin: 0 auto; }
        .left{padding-left:8px;perspective:800px;}
        .login{width:235px;height:200px;background:url("img/login_bg.png") no-repeat;padding:35px 0 0 20px;}
        .login h3{  height:23px;line-height:30px;text-align:center;font-size: 12px;color:#8bb85b;font-weight: bold;padding: 5px;  }
        .login label{  width: 60px;  font-size: 10px; color: #3e600d;  }
        .login input{  width:92px;  border:1px solid #7cab38;  }
        .login .bottom{padding-top:6px;text-align:center;}
        .login .bottom a{line-height:20px;background:#51ccb3;border:1px solid #33a790;font-size:10px;color:#fff;display:inline-block;padding:0 16px;}


        .plan{
            width:213px;height:365px;margin-left:12px;background:url("img/plan.png") no-repeat;
        }
    </style>
</head>

<body>
    <header>
        <div>
            <img src="img/logo.png" class="logo">
        </div>
        <div class="top">
            <ul>
                <li><a href="#">마이페이지</a></li>
                <li><a href="#">도와드릴까요</a></li>
                <li><a href="#">학부모마당</a></li>
                <li><a href="#">전체보기</a></li>
            </ul>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">교과학습</a>
                </li>
                <li>
                    <a href="#">도와드릴까요</a>
                </li>
                <li>
                    <a href="#">학부모마당</a>
                    <div class="submenue">
                        <ul>
                            <li><a href="#">도와드릴까요?</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">전체보기</a>
                    <div class="submenue">
                        <ul>
                            <li><a href="#">도와드릴까요?</a></li>
                            <li><a href="#">학부모마당</a></li>
                            <li><a href="#">전체보기</a></li>
                            <li><a href="#">전체보기</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">교과학습</a>
                </li>
            </ul>
        </div>
    </header>

   <div>
       <div class="content">
           <div class="left">
               <div class="login">
                   <div>
                       <h3>登&nbsp&nbsp&nbsp&nbsp录</h3>
                       <div>
                           <label>用户名</label>
                           <input type="text" value="" />
                       </div>
                       <div>
                           <label>密码</label>
                           <input type="password" value="" />
                       </div>
                       <div class="bottom">
                           <a href="#">登录</a>
                           <a href="#">注册</a>
                       </div>
                   </div>
               </div>
               <div class="plan">
                   <img src="img/background.png" class="bg" style="filter:alpha(opacity=70); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.6;">
               </div>
           </div>
       </div>
   </div>

</body>
</html>